<template>
	<view class="person_wrap">
		<view class="heade-wrap">
			<image :src="avtator" mode="" class="avatar"></image>
			<view class="username" v-if="user.userName">{{user.userName}}</view>
			<view class="phone" v-if="user.PhoneNo">{{user.PhoneNo}}</view>
		</view>
		<view class="content-wrap">
			<view class="content-item flex" v-for="(item,index) in menuList" :key="index" @click="handleMenu(item)">
				<view class="iconfont" :class="[item.icon]"></view>
				<view class="name">{{item.name}}</view>
				<view class="iconfont icon-youjiantou" v-if="item.url"></view>
				<view class="qudao" v-if="!item.url">{{user.ChannelName}}</view>
			</view>
		</view>
		<view class="confirm" @click="logout">退出登录</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		ref,
		reactive,
		computed,
		onMounted,
	} from 'vue';

	import {
		useUserStore
	} from '@/stores/user.js';

	import {
		request,
		baseUrl
	} from '@/utils/request.js'

	const avtator = ref('/static/img/home/avatar.png')

	const userConfig = useUserStore();

	const user = ref({})

	const menuList = ref([{
		icon: 'icon-danwei',
		name: '渠道',
		url: ''

	}, {
		icon: 'icon-shebeiguanli',
		name: '设备管理',
		url: '/pages/my/equipment'

	}, {
		icon: 'icon-xiugai',
		name: '修改密码',
		url: '/pages/my/psd'

	}])

	const handleMenu = (res) => {
		const {
			url
		} = res;
		if (!url) return;
		uni.navigateTo({
			url
		})
	}

	const logout = () => {
		uni.redirectTo({
			url: '/pages/login/login'
		})
		uni.clearStorageSync()
	}

	onLoad(() => {
		const userinfo = uni.getStorageSync('userInfo')
		user.value = userinfo;
		if (userinfo.img) {
			avtator.value = baseUrl + '/' + userinfo.img
		}
	})

	onMounted(() => {
		console.log('onMounted...', userConfig.userInfo)
	})
</script>

<style lang="scss" scoped>
	.person_wrap {
		color: #fff;

		.heade-wrap {
			padding: 60rpx 0;
			text-align: center;
			color: #fff;
			background-color: $base-bg;
		}

		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}

		.username {
			color: #fff;
			padding: 10rpx 0;
		}

		.content-wrap {
			width: auto;
			margin: 40rpx auto;
			padding: 20rpx;
			box-sizing: border-box;

			.content-item {
				height: 100rpx;
				line-height: 100rpx;
				margin-bottom: 20rpx;
				color: $base-color;
				font-size: 28rpx;
				border-bottom: 1rpx solid $bor-color;

				.iconfont {
					font-size: 40rpx;
				}

				.name {
					margin-left: 6rpx;
				}

				.icon-youjiantou {
					margin-left: auto;
				}

				.qudao {
					font-size: 28rpx;
					margin-left: auto;
				}
			}
		}

		.confirm {

			width: 690rpx;
			height: 80rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 40rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			color: $base-color;
			background-color: #fff;
			border-radius: 40rpx;
			border: 1rpx solid $bor-color;
		}
	}
</style>